import React from 'react';
import { Icon } from 'weaver-mobile';

class Collapse extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showGroup: props.showGroup ? props.showGroup : false,
            title: props.title,
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        //组件渲染控制
        //return this.props.title !== nextProps.title
        return true;
    }
    componentWillReceiveProps(nextProps) {
        if (this.props.showGroup !== nextProps.showGroup) {
            this.setState({showGroup: nextProps.showGroup});
        }
    }

    render() {
        const {showGroup,title} = this.state;
        return (
          <div className='fold-group' key={title}>
          <div className='fold-title' onClick={() => {this.handleToggle(title, !showGroup)}}>
            {title}
            <Icon className="flod-icon" type={showGroup ? 'up' : 'down'} />
          </div>
          <div className={`${showGroup ? 'show' : 'hide'}`}>
            {this.props.chileden}
          </div>
        </div>
        )
    }

    handleToggle = ()=>{
      const {showGroup} = this.state;
      if(this.props.handleToggle && typeof this.props.handleToggle ==='function' ){
        this.props.handleToggle(showGroup)
      }else{
        this.setState({showGroup:!showGroup})
      }
    }

}

export default Collapse
